<!-- =
 @Author: LW
 @Date: 2021-8-21 17:17:08   
 @function:客户管理
 -->
 <template>
   <div>
    <el-card class="box-card card1">
      <div class="searchBox">
        <el-form :inline="true" :model="formSearch">
          <el-form-item  label="搜索：">
            <el-input
              size="mini"
              v-model="formSearch.parameters"
              placeholder="输入关键字"
            ></el-input>
          </el-form-item>
          <el-form-item class="goods_opt">
            <el-button size="mini" type="primary" icon="el-icon-search" @click="handleSearch()">搜索</el-button>
            <el-button size="mini" type="danger" icon="el-icon-remove" @click="handleRemove()">删除</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card class="box-card">
          <!--列表 -->
          <el-table
            class="ptab"
            border
            stripe
            size="small"
            ref="multipleTable"
            :data="listData"
            highlight-current-row
            v-loading="loading"
            element-loading-text="拼命加载中"
            style="width: 100%;"
            :height="tableHeight"
            @selection-change="checkSelect"
            @row-click="handleRowClick"
          >
            <el-table-column type="selection" align="center" width="55px" ></el-table-column>
            <el-table-column align="center" label="序号" width="55px" fixed="left">
               <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="联系人姓名" width="150" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" prop="mobile_phone" label="电话号码" width="130" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" prop="sex_name" label="性别" width="90" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" prop="integral" label="积分" width="100" ></el-table-column>
            <el-table-column align="center" prop="monetary" label="消费总金额" width="100" ></el-table-column>
            <el-table-column align="center" prop="nickname" label="用户昵称" width="200" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" prop="open_id" label="OpenId" width="200" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" prop="country" label="所在国家" width="100" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" prop="province" label="所在省份" width="100" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" prop="city" label="所在城市" width="100" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" prop="is_valid_name" label="是否有效" width="90">
              <template slot-scope="scope">
                <el-switch
                  on-text="是"
                  off-text="不是"
                  active-value="有效"
                  inactive-value="无效"
                  on-color="#5B7BFA"
                  off-color="#dadde5"
                  v-model="scope.row.is_valid_name"
                  @change="validInfo(scope.row,1)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column align="left" label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  size="mini"
                  class="btnBlue"
                  @click="handleEdit(scope.$index, scope.row)"
                >修改</el-button>
                <el-button
                  type="text"
                  icon="el-icon-remove"
                  size="mini"
                  class="btnRed"
                  @click="handleRemove(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 pageparm返回的分页参数信息 pageListInfo为分页组件回掉方法-->
          <Pagination v-bind:child-msg="pageparm" @callFather="pageListInfo"></Pagination>
        </el-card>
      </el-col>
    </el-row>
    <!-- 编辑等操作弹窗 -->
    <!-- dialog 弹窗顶部下划线 v-dialogDrag可拖拽-->
    <el-dialog
      :top="editForm.top"
      :title="editForm.formTitle"
      :visible.sync="editForm.formVisible"
      v-if="editForm.formVisible"
      :width="editForm.width"
      v-dialogDrag
      custom-class="dialog"
      :close-on-click-modal="false"
    >
      <component v-bind:is="curComponent" v-bind:formInfo="formInfo"  @callBack="callBack"></component>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/common/pagination' //分页组建
import ClientInfoHttp from '@/api/business/clientInfo' //http
const { 
  loadPageList, 
  saveInfo,
  removeInfo,
 } = ClientInfoHttp;

export default {
  //注册组件
  components: {
    Pagination, //分页
  },
  data() {
    return {
      //列表相关
      loading: false, //是显示加载
      tableHeight: window.innerHeight * 0.795, //表格高度
      pageparm:{ currentPage: 1, pageSize: 16, total: 0 }, //分页参数
      listData:[], //表格返回信息
      multipleSelection: null, //复选框
      formSearch: {
        //请求数据参数
        page: 1,
        limit: 16,
        field: 'name',
        order: 'asc',
        parameters: "", //关键字
      },
      curComponent: null,
      disabled: false,
      //编辑框窗体参数
      editForm: {
        formVisible: false, //窗体是否显示
        formTitle: '', //窗体标题
        width:"55%"
      },
      formInfo: {},
    }
  },
  /**html加载完成之前，执行。执行顺序：父组件-子组件 */
  created() {
  },
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {
    //初始化获取
    this.loadList()
  },
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    //点击复选框触发，复选框样式的改变
    checkSelect(val) {
      this.multipleSelection = val
    },
    //点击行触发，选中或不选中复选框
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    //获取数据方法
    loadList() {
      this.loading = true
      loadPageList(this.formSearch).then((response) => {
        let data = response.data
        if (data.Code === 1000) {
          this.listData = data.Data
          //分页赋值
          this.pageparm.currentPage = this.formSearch.page
          this.pageparm.pageSize = this.formSearch.limit
          this.pageparm.total = data.Count
        } else {
          this.$messageTip.warning(data.Msg)
          this.listData = []
          this.pageparm.currentPage = this.formSearch.page
          this.pageparm.pageSize = this.formSearch.limit
          this.pageparm.total = data.Count
        }
        this.loading = false
      })
    },
    //分页插件事件
    pageListInfo(par) {
      this.formSearch.page = par.currentPage
      this.formSearch.limit = par.pageSize
      this.loadList();
    },
     //搜索事件
    handleSearch() {
      this.formSearch.page = 1;
      this.formSearch.limit = 16;
      this.loadList();
    },
    //编辑界面
    handleEdit(index, row) {
      this.editForm.formVisible = true;
      if (row != null && row != undefined) {
        this.editForm.formTitle = "修改信息";
        this.editForm.width = "30%";
        //不要直接赋值，不然造成-引用类型传递
        let obj = JSON.parse(JSON.stringify(row)); //row是父组件传递的对象
        this.formInfo = obj;
        this.curComponent = EditForm;
      } else {
        this.editForm.formTitle = "新增信息";
        this.editForm.width = "60%";
        this.formInfo = {};
        this.curComponent = AddForm;
      }
    },
    //删除
    handleRemove(index, row) {
      let self = this;
      if ( row != null || (this.$refs.multipleTable && this.$refs.multipleTable.store.states.selection.length > 0)
      ) {
        this.$messageTip.boxWarning("确定要删除吗?")
          .then(() => {
            let par = [];
            if (row != null) {
              par.push(row.id);
            } else {
              let selectData = self.$refs.multipleTable.store.states.selection;
              for (let index = 0; index < selectData.length; index++) {
                par.push(selectData[index].id);
              }
            }
            removeInfo(par).then(response => {
              let data = response.data;
              if (data.Code === 1000) {
                self.$messageTip.success(data.Msg); 
                self.loadList();
              } else {
                self.$messageTip.warning(data.Msg); 
              }
            });
          })
          .catch(() => {
            this.$messageTip.info( "已取消删除！"); 
          });
      } else {
         this.$messageTip.info( "请选择删除项！"); 
      }
    },
  },
}
</script>
